<!DOCTYPE html>
<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
    //      组件化
    class Asynchronous extends React.Component{
        constructor(props) {
            super(props);
            this.state = {counter:1};
        }

        componentDidMount() {
            this.timer = setInterval(
                ()=>this.add(),
                1000
            );
        }

        add(){
            this.setState((prevState, props) => ({
                counter: prevState.counter + (+props.increment)
            }));
        }

        render() {
            return (
                    <div>
                        <h2> Current Counter: {this.state.counter}.</h2>
                    </div>
            );
        }
    }
    ReactDOM.render(<Asynchronous increment="1"/>, document.getElementById("example"));

</script>
</body>
</html>

